<template>
  <el-dialog :model-value="dialogVisible"
             :title="curId ? '编辑名称' : '新增名称'"
             width="700px"
             :before-close="close">
             
    <el-form ref="ruleForm"
             :model="ruleForm"
             label-position="left"
             status-icon
             :rules="rules"
             label-width="100px"
             class="demo-ruleForm">
      <el-form-item label="名称"
                    prop="name">
        <el-input v-model="ruleForm.name"
                  clearable
                  autocomplete="off" />
      </el-form-item>

      <el-form-item label="平台"
                    prop=''>
        <el-select v-model="ruleForm.platform_id"
                   clearable
                   placeholder="请选择">
          <el-option v-for="item in platformsData"
                     :key="item.name"
                     :label="item.name"
                     :value="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item label="accesskey"
                    prop="accesskey">
        <el-input v-model="ruleForm.accesskey"
                  clearable
                  autocomplete="off" />
      </el-form-item>
      <el-form-item label="secret"
                    prop="secret">
        <el-input v-model="ruleForm.secret"
                  clearable
                  autocomplete="off" show-password />
      </el-form-item>

      <el-form-item label="描述"
                    prop="desc">
        <el-input v-model="ruleForm.desc"
                  clearable
                  autocomplete="off" />
      </el-form-item>

      <el-form-item>
        <el-button type="primary"
                   @click="submitForm('ruleForm')">提交</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>
<script>

import {
  createPlatformAccount,
  getPlatformAccount,
  updatePlatformAccount
} from '@/api/cloudPlatform/platform'

// 引用模块
import { getPlatforms } from '@/api/cloudPlatform/platform'

export default {
  name: 'CuForm',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    curId: {
      type: Number,
      default: null
    }
  },


  data () {
    return {
      ruleForm: {
        name: '',
        platform_id:'',
        desc: '',
        accesskey: '',
        secret: ''
      },
      platformsData: [],
      rules: {
        name: [{ required: true, trigger: 'blur', message: '名称不能为空' }]
      }
    }
  },
  watch: {
    dialogVisible (v) {
      console.log('监听到子组件开启')
      if (v) {
        if (this.curId) {
          console.log('传入cuId:',this.curId)
          getPlatformAccount(this.curId).then((response) => {
            this.ruleForm = response.data;
            this.ruleForm.platform_id = this.ruleForm.platform_id.id
            console.log("getDate:",response.data)
          })
  
        }
        // 获取列表
        this.getPlatforms()

      }
    }
  },
  methods: {

    getPlatforms () {
      getPlatforms().then((response) => {
         
        this.platformsData = response.data.results;
        const platforms  = []
        for ( let i in this.platformsData ){

            platforms.push(this.platformsData[i].name)
            console.log("PlatformId:",i )
        }
        console.log(platforms)
        
      })
    },
    close () {
      this.$refs.ruleForm.resetFields()
      this.$emit('close')
    },
    search () {
      this.close()
      this.$emit('search')
    },


    // 提交表单
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.curId) {
            if (!this.ruleForm.platform_id) {
              this.ruleForm.platform_id = null
            }
            updatePlatformAccount(this.curId, this.ruleForm).then(res => {
                res.data
              this.$message({
                message: '修改成功',
                type: 'success'
              })
              this.search()
            })
          } else {
            createPlatformAccount(this.ruleForm).then(res => {
                res.data
              this.$message({
                message: '新增成功',
                type: 'success'
              })
              this.search()
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>
